import { FC } from 'react';
import { YHCard, YHDescriptions } from '@yh/yh-design';
import { Wrapper, CardWrapper } from './styled';

interface Config {
  label: string;
  text: string;
}

interface DescCardProps {
  title?: string;
  headTitle: string;
  bottomTitle: string;
  config: Array<Config>;
  config2: Array<Config>;
}

const DescCard: FC<DescCardProps> = (props) => {
  const { config, title, headTitle, bottomTitle, config2 } = props;
  return (
    <Wrapper>
      <YHCard title={title} headStyle={{ backgroundColor: '#fafafa' }}>
        <CardWrapper>
          <YHDescriptions column={3} title={headTitle}>
            {config.length &&
              config.map((obj) => (
                <YHDescriptions.Item {...obj}>{obj.text}</YHDescriptions.Item>
              ))}
          </YHDescriptions>
        </CardWrapper>
        <CardWrapper>
          <YHDescriptions column={1} title={bottomTitle}>
            {config2.length &&
              config2.map((obj) => (
                <YHDescriptions.Item {...obj}>{obj.text}</YHDescriptions.Item>
              ))}
          </YHDescriptions>
        </CardWrapper>
      </YHCard>
    </Wrapper>
  );
};

export default DescCard;
